<template>
	<div class="want swiper" >
		<div class="want_top">
			<p>
				小众种草<span>游侠客独一无二的旅游体验</span>
			</p>
		</div>
		<div class="want_bottom " >
			<ul class="swiper-wrapper" >
				<li v-for="item in list" :key="item.id" class="swiper-slide">
					<img :src="item.picture"/>
					<p>{{item.txt}}</p>
					<span>{{item.title}}</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	// 1引入vue周期函数
	import {onMounted} from 'vue';
	// 2引入swiper的动态组件
	import Swiper ,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
	} from 'swiper';
	// 3swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube]);
	export default{
		name:'Want',
		data(){
			return{
				list:[
					{id:1,picture:'zcimg/1.png',txt:'东藏会',title:'收藏四季美好'},
					{id:2,picture:'zcimg/2.jpg',txt:'蓝冰季',title:'邂逅梦幻蓝冰'},
					{id:3,picture:'zcimg/3.jpg',txt:'开路先锋',title:'探索永无止境'},
					{id:4,picture:'zcimg/4.jpg',txt:'向野房车',title:'新型旅游方式'},
					{id:5,picture:'zcimg/5.jpg',txt:'游侠人文',title:'诗行江南'},
					{id:6,picture:'zcimg/6.jpg',txt:'野奢邦',title:'宿于山海中'},
				]
			}
		},
		setup(){
			onMounted ( ()=> {
				new Swiper('.want_bottom',{
					 slidesPerView: 3,
				})
			})
		},
		
	}
</script>

<style scoped>
	.want{
		margin: 0 auto;
		width: 95%;
		height: 17rem;
	}
	.want .want_top{
		line-height: 3rem;
		background-color: white;
		text-indent: 1rem;
	}
	.want  .want_top  p{
		font-weight: bolder;
		font-size: 1.2rem;
	}
	.want  .want_top p span{
		margin-left: 1.5rem;
		font-size: 0.5rem;
		font-weight:  normal;
		color: #ffb591;
		background-color: #fff3ea;
		border-radius: 0.5rem;
	}
	.want .want_bottom{
		width: 100%;
	}
	.want .want_bottom ul{
		width: 100%;
		position: absolute;
	}
	.want .want_bottom li{
		width: 100%;
		text-align: center;
		color: white;
	}
	.want .want_bottom li p{
		position: relative;
		font-weight: bolder;
		font-size: 1rem;
		bottom: 3.5rem;
	}
	.want .want_bottom li span{
		position: relative;
		bottom: 3rem;
		font-size: 0.8rem;
	}
	.want_bottom img{
		width: 97%;
	} 
	.want_bottom ul li img{
		border-radius: 0.4rem;
	}
	
</style>
